<template>
  <el-dialog class="autoDistribution-dialog" title="自动分配线索" :visible.sync="autoDistribution.dialogVisible" width="700px" @closed="autoDistributionClosed">
    <el-form ref="form" :model="autoDistribution.form" label-width="80px">
      <el-form-item label="线索名称" prop="dictName">
        <el-select v-model="autoDistribution.form.clue_id" size="small" filterable placeholder="请选择" style="width: 375px;">
          <el-option v-for="item in autoDistribution.clueList" :key="item.id" :label="item.name" :value="item.id"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="处理方式" prop="dictType">
        <el-select v-model="autoDistribution.form.is_cover" size="small" filterable placeholder="请选择" style="width: 375px;">
          <el-option label="覆盖原始负责人" :value="true"></el-option>
          <el-option label="仅分配未关联归属人" :value="false"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="负责人" prop="customer_ids">
        <div class="content">
          <div class="content-l">
            <!--部门数据-->
            <div class="head_container" style="margin-top: -10px">
              <!--              <el-input v-model="autoDistribution.deptName" placeholder="请输入部门名称" clearable size="small" prefix-icon="el-icon-search"/>-->
            </div>
            <div class="tree_container">
              <el-tree
                ref="autoDistributionDept"
                :data="autoDistribution.treeList"
                :props="autoDistribution.defaultProps"
                :expand-on-click-node="false"
                :filter-node-method="filterNode"
                default-expand-all
                @node-click="deptTreeHandleNodeClick"
              />
            </div>
          </div>
          <div class="content-r">
            <!--用户数据-->
            <div>
              <el-input
                v-model="autoDistribution.search"
                placeholder="请输入用户名称"
                clearable
                size="small"
                suffix-icon="el-icon-search"
                style="width: 200px"
                @keyup.enter.native="listUser"
              />
            </div>
            <div>
              <el-table ref="userTable" v-loading="autoDistribution.userloading" row-key="id" height="300" :data="autoDistribution.userList" @selection-change="autoDistributionHandleSelectionChange">
                <el-table-column :reserve-selection="true" type="selection" width="50" />
                <el-table-column key="username" label="用户名称" prop="username" />
                <el-table-column key="name" label="用户昵称" prop="name" />
              </el-table>
            </div>
          </div>
        </div>
      </el-form-item>
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button type="primary" :loading="autoDistribution.subLoading" @click="ccAutoDistribution">确 定</el-button>
      <el-button @click="autoDistribution.dialogVisible=false">取 消</el-button>
    </div>
  </el-dialog>
</template>

<script>
import { treeselect } from "@/api/vadmin/permission/dept";
import { listUser } from "@/api/vadmin/permission/user";
import { clueList, ccAutoDistribution } from "@/api/crm/customer";
export default {
  name: "CcAutoDistribution",
  data() {
    return {
      autoDistribution: {
        dialogVisible: false,
        clueList: [],
        deptName: "",
        treeList: [],
        dept: {},
        userList: [],
        userSelection: [],
        search: "",
        userloading: false,
        subLoading: false,
        form: {
          clue_id: "",
          customer_ids: [],
          is_cover: true
        },
        defaultProps: {
          children: "children",
          label: "label"
        }
      }
    };
  },
  methods: {
    open() {
      this.autoDistribution.dialogVisible = true;
      this.getDeptTreeselect();
      this.findClueList();
    },
    autoDistributionClosed() {
      Object.assign(this.autoDistribution, this.$options.data().autoDistribution);
      this.$refs["userTable"].clearSelection();
    },
    autoDistributionHandleSelectionChange(selection) {
      this.userSelection = selection;
      this.autoDistribution.form.customer_ids = selection.map(item => item.id);
    },
    getDeptTreeselect() {
      treeselect().then(response => {
        const tree = this.handleTree(response.data, "id");
        this.autoDistribution.treeList = tree;
      });
    },
    // 筛选节点
    filterNode(value, data) {
      if (!value) return true;
      return data.label.indexOf(value) !== -1;
    },
    // 节点单击事件
    deptTreeHandleNodeClick(dept) {
      this.autoDistribution.dept = dept;
      this.listUser();
    },
    listUser() {
      this.autoDistribution.userloading = true;
      listUser({ pageNum: "all", deptId: this.autoDistribution.dept.id, search: this.autoDistribution.search }).then(response => {
        this.autoDistribution.userList = response.data;
      }).finally(() => {
        this.autoDistribution.userloading = false;
      });
    },
    findClueList() {
      clueList({ pageNum: "all" }).then(response => {
        this.autoDistribution.clueList = response.data;
      });
    },
    ccAutoDistribution() {
      const { clue_id, customer_ids } = this.autoDistribution.form;
      if (clue_id === "") {
        this.$message.warning("请选择线索名称");
        return;
      } else if (customer_ids.length === 0) {
        this.$message.warning("请选择负责人");
        return;
      }
      this.autoDistribution.subLoading = true;
      ccAutoDistribution(this.autoDistribution.form).then(responst => {
        const { code } = responst;
        if (code === 200) {
          this.$message.success("操作成功");
          this.autoDistribution.dialogVisible = false;
          this.$emit("change");
          this.getList();
        }
      }).finally(() => {
        this.autoDistribution.subLoading = false;
      });
    }
  }
};
</script>

<style lang="scss" scoped>
.autoDistribution-dialog {
  ::v-deep .el-dialog__body {
    height: 500px;
  }

  ::v-deep .el-tree {
    height: 335px;
    overflow: hidden;
    overflow-y: auto;
  }
}
.content{
  display: flex;
  justify-content: space-between;
  .content-l{
    flex:0 0 200px;
    margin-right: 12px;
  }
  .content-r{
    flex: 1;
    background: #fff;
  }
}
.head_container{
    padding-bottom: 12px;
    background: #fff;
}
</style>
